<template>
  <div class="button_box">
    <span :class="[formData.stage_state == 0 ? 'btn active' : 'btn']" @click="onStatus(0)">全部商机</span>
    <span :class="[formData.stage_state == 1 ? 'btn active' : 'btn', 'postion']" @click="onStatus(1)"
      >待审核<span v-if="unaudited" class="badeg">{{ unaudited }}</span>
    </span>
    <span :class="[formData.stage_state == 2 ? 'btn active' : 'btn']" @click="onStatus(2)">已审核</span>
  </div>
  <!-- <div class="search_box"> -->
  <el-form class="search_box" :model="formData" label-width="auto">
    <!-- <div class="item_box"> -->
    <el-row class="el_filter_row" :gutter="20">
      <el-col :span="8">
        <el-form-item label="商机名称">
          <el-input v-model="formData.name" placeholder="请输入商机编号 | 名称" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="商机流程">
          <el-select v-model="formData.workflow_id" placeholder="请选择商机流程" @change="onWorkflowChange">
            <el-option v-for="item in workflowSelect" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="商机阶段">
          <el-select v-model="formData.stage_id" placeholder="请选择商机阶段">
            <el-option v-for="item in processSelect" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.stage_state == 0">
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="formData.created_at"
            prefix-icon="Calendar"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="—"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.stage_state == 1">
        <el-form-item label="提审时间">
          <el-date-picker v-model="formData.audit_created_at" prefix-icon="Calendar" type="datetimerange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" @change="onTime" />
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.stage_state == 2">
        <el-form-item label="审核时间">
          <el-date-picker v-model="formData.audit_time" prefix-icon="Calendar" type="datetimerange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" @change="onTime" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="预计赢单时间">
          <el-date-picker v-model="formData.predict_time" prefix-icon="Calendar" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="datetime" placeholder="选择日期" @change="onTime" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="赢单时间">
          <el-date-picker v-model="formData.actual_time" prefix-icon="Calendar" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="datetime" placeholder="选择日期" @change="onTime" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户名称">
          <el-input v-model="formData.cust_info" placeholder="请输入客户名称|手机号搜索" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="归属员工">
          <el-select v-model="formData.belong_uid" placeholder="请选择归属员工" multiple popper-class="zw-hide_select_option" @click="openDepart('BELONG_UID')" @remove-tag="(v) => changeDepart('BELONG_UID', v)">
            <el-option v-for="item in belongUidList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.stage_state == 0">
        <el-form-item label="协助员工">
          <el-select v-model="formData.assist_ids" placeholder="请选择员工" multiple popper-class="zw-hide_select_option" @click="openDepart('ASSIST_IDS')" @remove-tag="(v) => changeDepart('ASSIST_IDS', v)">
            <el-option v-for="item in assistIdsList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.stage_state == 1">
        <el-form-item label="提审员工">
          <el-select v-model="formData.audit_created_uid" placeholder="请选择员工" multiple popper-class="zw-hide_select_option" @click="openDepart('AUDIT_CREATED_UID')" @remove-tag="(v) => changeDepart('AUDIT_CREATED_UID', v)">
            <el-option v-for="item in auditCreatedUid" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.stage_state == 2">
        <el-form-item label="审核员工">
          <el-select v-model="formData.audit_uid" placeholder="请选择员工" multiple popper-class="zw-hide_select_option" @click="openDepart('AUDIT_UID')" @remove-tag="(v) => changeDepart('AUDIT_UID', v)">
            <el-option v-for="item in auditUid" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="商机金额">
          <div class="amount-member">
            ￥
            <template v-if="formData.amount[0]">
              <el-input-number v-model="formData.amount[0]" :max="formData.amount[1] ? formData.amount[1] : 99999999" :controls="false" :precision="2" :step="0.1" />
              —
              <el-input-number v-model="formData.amount[1]" :min="formData.amount[0] ? formData.amount[0] : 1" :controls="false" :precision="2" :step="0.1" />
            </template>
            <template v-else>
              <el-input-number v-model="formData.amount[0]" :max="formData.amount[1] ? formData.amount[1] : 99999999" :controls="false" :precision="2" :step="0.1" />
              —
              <el-input-number v-model="formData.amount[1]" :min="formData.amount[0] ? formData.amount[0] : 1" :controls="false" :precision="2" :step="0.1" />
            </template>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <div class="btn_box">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset">清空</el-button>
            <el-button type="text" :icon="visible ? ArrowDownBold : ArrowUpBold" @click="pickUp">{{ visible ? '收起' : '展开' }}</el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- </div> -->
  </el-form>
  <!-- </div> -->
  <div class="fun_box">
    <div v-if="formData.stage_state == 1"></div>
    <div v-else class="left">
      <template v-if="formData.stage_state != 2">
        <span class="menu_l"> </span>
        <span class="border"></span>
        <span class="menu_l menu_r" @click="onMenu"> </span>
        <el-checkbox v-model="formData.is_overdue" :true-label="1" :false-label="2" @change="onCheckboxChange">逾期商机</el-checkbox>
        <el-checkbox v-model="formData.is_mine" :true-label="1" :false-label="2" @change="onCheckboxChange">仅归属为自己的</el-checkbox>
        <el-checkbox v-model="formData.is_assist" :true-label="1" :false-label="2" @change="onCheckboxChange">自己协助的</el-checkbox>
      </template>
      <el-checkbox v-else v-model="formData.is_mine_audit" :true-label="1" :false-label="2" @change="onCheckboxChange">我审核的</el-checkbox>
    </div>
    <div>
      <el-button @click="onExoprt" :disabled="exportStatus">导出列表</el-button>
      <el-button type="primary" @click="onCreate">新建商机</el-button>
    </div>
  </div>
  <ZWDepart ref="DepartRef" @submit="getDepart" :type="1" />
</template>

<script setup lang="ts">
  import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  import { getProcessSelect, getWorkflowSelect } from '@/api/salesleads/salesmanagement/business'
  import { getSetionId, AFold } from '@/utils/utils'
  import bus from '@/utils/bus'
  import { reactive, withDefaults, defineEmits, defineProps, ref, onMounted } from 'vue'
  interface Props {
    unaudited: any
    exportStatus: boolean
  }
  const emit = defineEmits(['submit', 'handle', 'getTableH'])
  withDefaults(defineProps<Props>(), {
    unaudited: 0,
    exportStatus: true
  })
  const formData: any = reactive({
    name: '', //商机名称
    workflow_id: '', //商机流程ID
    stage_id: '', //商机流程阶段ID
    amount: [void 0, void 0], //商机金额
    belong_uid: [], //归属员工
    assist_ids: [], //协助员工
    audit_created_uid: [], // 提审员工
    audit_uid: [], // 审核员工
    cust_info: '', //主客户
    created_at: [], //创建时间
    predict_time: '', //预计赢单日期
    actual_time: '', //实际赢单日期
    audit_created_at: [], //提审时间
    audit_time: [], //审核时间
    is_overdue: 2, //是否逾期 1是 2否
    is_mine: 2, //是否仅归属自己的 1是 2否
    is_assist: 2, //是否自己协助的 1是 2否
    is_mine_audit: 2, //是否我审核的 1是 2否
    stage_state: 0 // 0全部 1待审核 2已审核
  })
  const visible = ref(true)
  const pickUp = () => {
    visible.value = !visible.value
    AFold(visible.value, '.el_filter_row')
    emit('getTableH')
  }
  const onTime = (v: any) => {
    console.log(v)
    if (!v) {
      formData.predict_time || (formData.predict_time = '')
      formData.actual_time || (formData.actual_time = '')
      formData.created_at || (formData.created_at = [])
      formData.audit_created_at || (formData.audit_created_at = [])
    }
  }
  const onSubmit = () => {
    let params = { ...formData }
    params.amount[0] || (params.amount = [])
    params.amount[1] || (params.amount = [])
    params.belong_uid.length || (params.belong_uid = '')
    params.belong_uid.length && (params.belong_uid = params.belong_uid[0])
    params.audit_created_uid.length && (params.audit_created_uid = params.audit_created_uid[0])
    params.audit_created_uid.length || (params.audit_created_uid = '')
    params.audit_uid.length || (params.audit_uid = '')
    params.audit_uid.length && (params.audit_uid = params.audit_uid[0])
    console.log(params.belong_uid)
    emit('submit', params)
  }
  const onStatus = (v: number) => {
    formData.stage_state = v
    onSubmit()
  }
  const onCheckboxChange = () => {
    onSubmit()
  }
  const onMenu = () => {
    emit('handle', 'MENU')
  }
  const onExoprt = () => {
    emit('handle', 'EXPORT')
  }
  const onCreate = () => {
    emit('handle', 'CREATE')
  }
  // 商机流程
  const workflowSelect: any = ref([])
  const onWorkflow = () => {
    getWorkflowSelect({ state: 'all' }).then((res: any) => {
      workflowSelect.value = res
    })
  }
  onWorkflow()
  // 流程阶段
  const processSelect: any = ref([])
  const onProcess = (workflow_id: any) => {
    getProcessSelect({ workflow_id }).then((res: any) => {
      console.log('流程阶段', res)
      processSelect.value = res
    })
  }
  const onWorkflowChange = (v: any) => {
    console.log('流程id', v)
    formData.stage_id = ''
    onProcess(v)
  }
  // 选择员工
  const belongUidList: any = ref([])
  const auditCreatedUid: any = ref([])
  const auditUid: any = ref([])
  const assistIdsList: any = ref([])
  const DepartRef = ref<any>() // 部门弹框类型
  const openType = ref('')
  const openDepart = (type: string) => {
    switch (type) {
      case 'BELONG_UID':
        DepartRef.value.multiple = false
        DepartRef.value.selectedMember = [...belongUidList.value]
        break
      case 'AUDIT_CREATED_UID':
        DepartRef.value.multiple = false
        DepartRef.value.selectedMember = [...auditCreatedUid.value]
        break
      case 'AUDIT_UID':
        DepartRef.value.multiple = false
        DepartRef.value.selectedMember = [...auditUid.value]
        break
      case 'ASSIST_IDS':
        DepartRef.value.multiple = true
        DepartRef.value.selectedMember = [...assistIdsList.value]
        break
    }
    openType.value = type
    DepartRef.value.departVisble = true
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    console.log('-------获取员工--------', res)
    switch (openType.value) {
      case 'BELONG_UID':
        belongUidList.value = res
        formData.belong_uid = getSetionId('id', belongUidList.value)
        break
      case 'AUDIT_CREATED_UID':
        auditCreatedUid.value = res
        formData.audit_created_uid = getSetionId('id', auditCreatedUid.value)
        break
      case 'AUDIT_UID':
        auditUid.value = res
        formData.audit_uid = getSetionId('id', auditUid.value)
        break
      case 'ASSIST_IDS':
        assistIdsList.value = res
        formData.assist_ids = getSetionId('id', assistIdsList.value)
        return
    }
  }
  // 员工移除
  const changeDepart = (type: any, tag?: any) => {
    console.log(tag, type, '------删除--------')
    switch (type) {
      case 'BELONG_UID':
        belongUidList.value = []
        formData.belong_uid = []
        break
      case 'AUDIT_CREATED_UID':
        auditCreatedUid.value = []
        formData.audit_created_uid = []
        break
      case 'AUDIT_UID':
        auditCreatedUid.value = []
        formData.audit_uid = []
        break
      case 'ASSIST_IDS':
        assistIdsList.value = assistIdsList.value.filter((item: any) => item.id != tag)
        formData.assist_ids = getSetionId('id', assistIdsList.value)
        break
    }
    console.log(formData.belong_uid, 'id')
    DepartRef.value.removeItem({ id: tag })
  }
  const onReset = () => {
    formData.name = ''
    formData.workflow_id = ''
    formData.stage_id = ''
    formData.amount = [void 0, void 0]
    formData.predict_time = ''
    formData.actual_time = ''
    formData.assist_ids = []
    formData.belong_uid = []
    formData.audit_created_uid = []
    formData.audit_uid = []
    formData.cust_info = ''
    formData.created_at = []
    formData.audit_created_at = []
    formData.audit_time = []
    formData.is_overdue = 2
    formData.is_mine = 2
    formData.is_assist = 2
    formData.is_mine_audit = 2
    processSelect.value = []
    onSubmit()
  }
  bus.on('reloadTable', () => {
    onSubmit()
  })
  onMounted(() => {
    onSubmit()
  })
  defineExpose({
    onSubmit
  })
</script>

<style lang="scss" scoped>
  .button_box {
    margin-bottom: 16px;
    .active {
      background-color: #fff1ed !important;
      color: #ff6b00;
    }
    .btn {
      padding: 11px;
      line-height: 41px;
      background-color: #f9f9f9;
      margin-right: 15px;
      margin-bottom: 16px;
      cursor: pointer;
      &:hover {
        background-color: #fff1ed;
        color: #ff6b00;
      }
    }
    .postion {
      position: relative;
      .badeg {
        position: absolute;
        top: 3px;
        right: -5px;
        width: 16px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        border-radius: 50%;
        border: 1px solid #ff6b00;
        font-size: 10px;
        color: #ff6b00;
      }
    }
  }
  .search_box {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f9f9f9;
    .amount-member {
      display: flex;
      .el-input-number {
        width: 100%;
      }
    }
  }
  .fun_box {
    display: flex;
    justify-content: space-between;

    padding-right: 16px;
    margin-bottom: 10px;
    font-size: 30px;
    .left {
      display: flex;
      align-items: center;
      .menu_l {
        width: 25px;
        height: 25px;
        margin-right: 20px;
        cursor: pointer;
        color: #969696;
        background: url('');
        background-size: 100%;
      }
      .menu_r {
        background: url('');
        background-size: 100%;
      }
      .border {
        margin-right: 15px;
        color: #d8d8d8;
            height: 20px;
    width: 1px;
    background: #d8d8d8;
      }
    }
  }
</style>
